<template>
    <div id="dialog">
        <el-dialog
            :title="DialogData.title"
            :visible.sync="DialogData.show"
            width="60%"
            >
                <div class="form">

                    <el-form :model="FormData" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        
                       <el-form-item label="导航分类" prop="title">
                                <el-select v-model="FormData.fid" placeholder="请选择" @change="selectChange">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                        </el-form-item>
                        <el-form-item label="ID" prop="title" v-if="DialogData.edit">
                            <el-input v-model="FormData.id" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="导航名称" prop="title" >
                            <el-input v-model="FormData.name" ></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="电话名称" prop="title">
                            <img :src="FormData.picture" alt="" v-if="FormData.picture && !uploadimg" class="imgs">
                            <el-upload
                                    action=""
                                    list-type="picture-card"
                                    :auto-upload="false"
                                    :limit="limit"
                                    :on-change="onChange"
                                    >
                                    <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                        </el-form-item> -->
                        
                        <el-form-item label="导航状态" prop="title">
                                <el-select v-model="FormData.status" placeholder="请选择">
                            <el-option
                            v-for="item in status"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                                </el-select>
                        </el-form-item>
                    </el-form>

                </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="DialogData.show = false">取 消</el-button>
                <el-button type="primary" @click="SubForm">确 定</el-button>
            </span>
            </el-dialog>
    </div>
</template>

<script>
    export default {
        props: {
            DialogData: Object,
            FormData: Object,
            select: Array
        },
        data() {
            return {
                MenuList: [],
                uploadimg: "",
                status: [
                    { value: 1, label: "开启"},
                    { value: 2, label: "关闭"},
                ],
                limit: 1,
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                icon: "",
                
            }
        },
        computed: {
            token() {
                return localStorage.token;
            },
            options() {
                return this.select
            }
        },
        mounted() {
            
        },
        methods: {
          
            // 提交添加或修改
            async  SubForm() {
                this.FormData.token = this.token
                let { token, fid, id,  status, name } = this.FormData
                let picture = this.uploadimg
                if (!fid && fid != 0) {
                    this.$message.error("请选择分类")
                    return false
                } else if (!status) {
                    this.$message.error("请选择状态")
                    return false
                } else if (!name) {
                    this.$message.error("请输入名称")
                    return false
                } else  {
                   
                    let res = await this.$axios.post("/admin/website/option",  this.FormData )
                     console.log(res);
                    if(res.data.code == 204 || res.data.code == 202) {
                        this.$message.success("更新成功")
                        this.$emit("update")
                        this.DialogData.show = false
                    } else {
                        this.$message.success("更新失败")
                        this.$emit("update")
                        this.DialogData.show = false
                    }
                }
                
            },

            // 图片变化
            onChange(e) {
                console.log(e);
                this.uploadimg = e.raw
            },
            selectChange(e) {
                console.log(e);
                
            }
 
        }
    }
</script>

<style lang="scss" scoped>
.sltbox {
    width: 148px;
    height: 148px;
    margin: 0 10px;
    img {
        width: 148px;
        height: 148px;
    }
}
.imgs {
    width: 148px;
    height: 148px;
    
}
.el-form-item__content {
    display: flex !important;
}

.up {
    width: 100%;
    display: flex;
}
</style>